
/**
 * #info
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime    2018/05/07
 *@description  alert component  alert组件
 */

/**
 * #item
 *
 * @type        aty-alert
 * @cn          alert
 * @menu        通知
 * @stPlugin    true
 * @stContainer true
 */

/**
 * #extendproperty
 *
 * @name    slot
 * @cn      插槽
 * @type    list
 * @options [desc,icon,close]
 * @description  slot="desc"，警告提示辅助性文字介绍<template slot="desc">Content of prompt. Content of prompt. Content of prompt.</template>
 * slot ="icon"，用户自定义图标<aty-icon type="ios-lightbulb-outline" slot="icon"></aty-icon>
 * slot ="close"，用户自定义alert组件触发关闭的元素<span slot="close">No longer prompt</span>
 */

import config from '../../../config/config.js'

// components
import atyIcon from '../../basic/icon/index.vue'
// prefix
const prefixCls = config.prefix + '-alert'
// module
export default {
  name: prefixCls,
  components: { atyIcon },
  props: {

    /**
     * #property
     *
     * @name      type
     * @cn        警告提示样式，可选值为info、success、warning、error
     * @type      list
     * @value      info
     * @options      [info,success,warning,error]
     * @description   警告提示样式，取值为 [info,success,warning,error] 中的一个
     */
    type: {
      validator (value) {
        return Artery.isOneOf(value, ['success', 'info', 'warning', 'error'])
      },
      default: 'info'
    },
    /**
     * #property
     *
     * @name      closable
     * @cn        是否可关闭
     * @type      boolean
     * @value    false
     * @description   该警告框是否可关闭
     */
    closable: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name      showIcon
     * @cn        是否显示图标
     * @type      boolean
     * @value    false
     * @description   该警告框是否显示图标
     */
    showIcon: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name      banner
     * @cn        是否不带圆角
     * @type      boolean
     * @value    false
     * @description   该警告框是否不带圆角
     */
    banner: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      closed: false,
      desc: false
    }
  },
  computed: {
    wrapClasses () {
      return [
                `${prefixCls}`,
                `${prefixCls}-${this.type}`,
                {
                  [`${prefixCls}-with-icon`]: this.showIcon,
                  [`${prefixCls}-with-desc`]: this.desc,
                  [`${prefixCls}-with-banner`]: this.banner
                }
      ]
    },
    messageClasses () {
      return `${prefixCls}-message`
    },
    descClasses () {
      return `${prefixCls}-desc`
    },
    closeClasses () {
      return `${prefixCls}-close`
    },
    iconClasses () {
      return `${prefixCls}-icon`
    },
    iconType () {
      let type = ''

      switch (this.type) {
        case 'success':
          type = 'checkmark-circled'
          break
        case 'info':
          type = 'information-circled'
          break
        case 'warning':
          type = 'android-alert'
          break
        case 'error':
          type = 'close-circled'
          break
      }

      return type
    }
  },
  methods: {
    close (e) {
      this.closed = true
      /**
       * #event
       *
       * @name     close
       * @param    event  当前的event对象
       * @body     function close(){ }
       * @description   警告提示框关闭时触发
       */
      this.$emit('close', e)
    }
  },
  mounted () {
    this.desc = this.$slots.desc !== undefined
  }
}
